<template>
  <!--
    根目录规范(必须不能为空)：
    idm-ctrl：控件类型 drag_container：容器，drag_container_inlieblock：行内容器，idm_module：非容器的组件
    id：使用moduleObject.id，如果id不使用这个将会被idm-ctrl-id属性替换
    idm-ctrl-id：组件的id，这个必须不能为空
  -->
  <div idm-ctrl="idm_module"
  :id="moduleObject.id"
  :idm-ctrl-id="moduleObject.id"
   >
    <div class="wordShow-wrap">
      <div class="writiTitle" v-if="propData.isTips">
        <span>{{ propData.titleDesc }}</span>
        <!-- <div>...</div> -->
      </div>
      <div class="wordShow-ul">
        <div class="wordShowli" v-for="(item, index) in list" :key="index" :style="computedStyleLi(item)" @click="handleClick(item)">
          <div class="wordShow-top">
            <div class="wordShow-title">
              <span :style="computedTitleFont(item)">{{ item.title }}</span>
              <div :style="computedSubFont(item)">{{ item.titleSub }}{{ fieldObj[item.titleSubField] || item.titleSubNum }}{{ item.titleSubUnit }}</div>
            </div>
            <span :style="computedNumberFont(item)">{{ fieldObj[item.numberField] || item.number }}</span>
          </div>
          <!-- 三行文字 -->
          <div class="wordShow-botm" v-if="item.styleType == '1'" :style="computedTop(item)">
            <div><span :style="`padding-right:${item.wordRightNum}`">{{ item.wordFirst }}</span>{{ fieldObj[item.firstField] || item.numFirst }}</div>
            <div><span :style="`padding-right:${item.wordRightNum}`">{{ item.wordScond }}</span>{{ fieldObj[item.scondField] || item.numScond }}</div>
            <div><span :style="`padding-right:${item.wordRightNum}`">{{ item.wordThird }}</span>{{ fieldObj[item.thirdField] || item.numThird }}</div>
            <div><span :style="`padding-right:${item.wordRightNum}`">{{ item.wordFour }}</span>{{ fieldObj[item.fourField] || item.numFour }}</div>
          </div>
          <!-- 进度条 -->
          <div v-if="item.styleType == '2'" :style="computedWidthStyle(item)">
            <div class="writi-line" :style="computedBgStyle(item)"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IwordShow',
  data() {
    return {
      moduleObject: {},
      fieldObj: {},
      list: [],
      inforobj: {},
      propData: this.$root.propData.compositeAttr || {
        isTips: true,
        width: '600px',
        titleDesc: "风险管控",
        tipsBox: {
          marginTopVal: "",
          marginRightVal: "",
          marginBottomVal: "",
          marginLeftVal: "",
          paddingTopVal: "5px",
          paddingRightVal: "",
          paddingBottomVal: "5px",
          paddingLeftVal: ""
        },
        tableMenu: [
          {
            key: '1',
            title: '紧急件',
            number: '6',
            libox: {
              marginTopVal: "",
              marginRightVal: "",
              marginBottomVal: "",
              marginLeftVal: "",
              paddingTopVal: "20px",
              paddingRightVal: "20px",
              paddingBottomVal: "20px",
              paddingLeftVal: "20px"
            },
            liWidth: '50%',
            titleSub: '占比',
            styleType: '1',
            titleSubNum: '20',
            titleSubUnit: '%',
            proWidth: '100%',
            bgColor: 'linear-gradient(180deg, #EF7C7C 0%, #D65D5D 100%)',
            proHeight: '5px',
            showProgressColor: {
              hex8: "#D8D8D8FF"
            },
            progressColor: {
              hex8: "#0091FFFF"
            },
            progressRadius: '10px',
            progressTop: '10px',
            wordFirst: '特题',
            wordScond: '特急',
            wordThird: '加急',
            wordFour: '平急',
            numFirst: '0',
            numScond: '2',
            numThird: '19',
            numFour: '19',
            wordRightNum: '5px'
          },
          {
            key: '2',
            title: '24小时内未办理',
            number: '6',
            libox: {
              marginTopVal: "",
              marginRightVal: "",
              marginBottomVal: "",
              marginLeftVal: "",
              paddingTopVal: "20px",
              paddingRightVal: "20px",
              paddingBottomVal: "20px",
              paddingLeftVal: "20px"
            },
            styleType: '2',
            liWidth: '50%',
            titleSub: '占比',
            titleSubNum: '20',
            titleSubUnit: '%',
            bgColor: 'linear-gradient(180deg, #EF7C7C 0%, #D65D5D 100%)',
            proWidth: '100%',
            proHeight: '5px',
            showProgressColor: {
              hex8: "#D8D8D8FF"
            },
            progressColor: {
              hex8: "#0091FFFF"
            },
            progressRadius: '10px',
            progressTop: '10px',
            wordFirst: '特题',
            wordScond: '特急',
            wordThird: '加急',
            numFirst: '0',
            numScond: '2',
            numThird: '19',
            wordRightNum: '5px'
          }
        ]
      }
    }
  },
  created() {
    this.moduleObject = this.$root.moduleObject
    this.init();
  },
  methods: {
    computedStyleLi (item) {
      let { libox, liWidth, libgColor, border } = item;
      let style = {};
      liWidth && (style['width'] = liWidth);
      libox && IDM.style.setBoxStyle(style, libox)
      libgColor && (style['background'] = libgColor)
      border && IDM.style.setBorderStyle(style, border)
      return style
    },
    computedTitleFont (item) {
      let { titleFont } = item;
      let style = {};
      titleFont && IDM.style.setFontStyle(style, titleFont);
      return style
    },
    computedSubFont(item) {
      let { titleSubFont } = item;
      let style = {};
      titleSubFont && IDM.style.setFontStyle(style, titleSubFont);
      return style
    },
    computedNumberFont(item) {
      let { numberFont } = item;
      let style = {};
      numberFont && IDM.style.setFontStyle(style, numberFont);
      return style
    },
    computedTop(item) {
      let { progressTop, wordNumFont } = item;
      let style = {};
      progressTop && (style['margin-top'] = progressTop);
      wordNumFont && IDM.style.setFontStyle(style, wordNumFont);
      return style
    },
    computedWidthStyle (item) {
      let { proWidth, proHeight, showProgressColor, progressTop, progressRadius } = item;
      let style = {};
      proWidth && (style['width'] = proWidth);
      proHeight && (style['height'] = proHeight);
      showProgressColor && (style['background-color'] = showProgressColor && showProgressColor.hex8);
      progressTop && (style['margin-top'] = progressTop);
      progressRadius && (style['border-radius'] = progressRadius);
      return style
    },
    computedBgStyle(item) {
      let { progressColor, titleSubNum, proHeight, progressRadius, titleSubField } = item;
      let style = {};
      progressColor && (style['background-color'] = progressColor && progressColor.hex8);
      if (this.fieldObj[titleSubField]) {
        style['width'] = this.fieldObj[titleSubField] + '%'
      } else {
        titleSubNum && (style['width'] = titleSubNum + '%');
      }
      proHeight && (style['height'] = proHeight);
      progressRadius && (style['border-radius'] = progressRadius);
      return style
    },
    handleStyle() {
      let styleObject = {},
        tipsStyleObj = {};
      for (const key in this.propData) {
        if (this.propData.hasOwnProperty.call(this.propData, key)) {
          const element = this.propData[key]
          if (!element && element !== false && element != 0) {
            continue
          }
          switch (key) {
            case 'width':
              styleObject['width'] = element
              break
            case 'height':
              styleObject['height'] = element;
              break
            case 'ulbox':
              IDM.style.setBoxStyle(styleObject, element)
              break
            case 'bgColor':
              styleObject['background-color'] = element && element.hex8
              break
            case 'boxShadow':
              styleObject['box-shadow'] = element
              break
            case 'boxBorder':
              IDM.style.setBorderStyle(styleObject, element)
              break
            case 'tipsBox':
              IDM.style.setBoxStyle(tipsStyleObj, element)
              break
            case 'tipsBorder':
              IDM.style.setBorderStyle(tipsStyleObj, element)
              break
            case 'tipsFont':
              IDM.style.setFontStyle(tipsStyleObj, element);
              break
          }
        }
      }
      window.IDM.setStyleToPageHead(this.moduleObject.id + " .wordShow-wrap", styleObject);
      window.IDM.setStyleToPageHead(this.moduleObject.id + " .writiTitle", tipsStyleObj);
    },
    propDataWatchHandle(propData) {
      this.propData = propData.compositeAttr || {};
      this.init();
    },
    // 过滤接口参数
    fileterParams() {
      let obj = {};
      if (this.propData.customFunc && this.propData.customFunc.length > 0) {
        let name = this.propData.customFunc[0].name
        obj = window[name] && window[name].call(this, this.inforobj, this.propData.dictRule);
      }
      return obj
    },
    handleClick(item) {
      if (this.propData.jumpFun && this.propData.jumpFun.length > 0) {
        let name = this.propData.jumpFun[0].name;
        window[name] && window[name].call(this, item, this.inforobj, this.propData.dictRule);
      }
    },
    initData() {
      if (this.moduleObject.env == "production") {
        if (this.propData.isField && this.propData.dataSource) {
          const routerParams = this.fileterParams();
          IDM.datasource.request(this.propData.dataSource[0]?.id, {
            moduleObject: this.moduleObject,
            param: { ...routerParams }
          }, (data) => {
            if (data) {
              this.fieldObj = data;
            }
          })
        }
      }
    },
    init () {
      console.log(this.propData, '数据');
      this.handleStyle();
      this.initData();
      this.list = this.propData.tableMenu;
    },
    /**
     * 组件通信：接收消息的方法
     * @param {
     *  type:"发送消息的时候定义的类型，这里可以自己用来要具体做什么，统一规定的type：linkageResult（组件联动传结果值）、linkageDemand（组件联动传需求值）、linkageReload（联动组件重新加载）
     * 、linkageOpenDialog（打开弹窗）、linkageCloseDialog（关闭弹窗）、linkageShowModule（显示组件）、linkageHideModule（隐藏组件）、linkageResetDefaultValue（重置默认值）"
     *  message:{发送的时候传输的消息对象数据}
     *  messageKey:"消息数据的key值，代表数据类型是什么，常用于表单交互上，比如通过这个key判断是什么数据"
     *  isAcross:如果为true则代表发送来源是其他页面的组件，默认为false
     * } object
     */
    receiveBroadcastMessage(object) {
      switch (object.type) {
        case 'linkageDemand':
          console.log('IwritiShow接收消息: ', object.message)
          this.inforobj = object.message;
          this.initData();
          break;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wordShow-wrap{
  .writiTitle{
    display: flex;
    justify-content: space-between;
  }
  .wordShow-ul{
    display: flex;
    .wordShow-top{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .wordShow-botm{
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>